<template>
    <router-view></router-view>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data() {
        return {
            ws: undefined,
        };
    },
    created() {
        this.initWs();
    },
    computed: {
        // ...mapState({
        //     ws: ({ chat: { ws } }) => ws,
        // }),
    },
    mounted() {
        
    },
    methods: {
        initWs(){
            this.$store.dispatch('chat/initWs');
        },
        // connection() {
        //     utils.get(utils.api.websocketURL.view, (res) => {
        //         const data = Object.assign(this.user, res.data);
        //         this.$store.dispatch('chat/setUser', data);
        //         this.ws = new WebSocket(`ws://172.18.19.4:8099/xxpt/web/PsyWebsocket/${data.userId}/${data.sid}`);
        //         this.ws.onopen = () => {
        //             console.log('建立连接');
        //         };
        //         this.ws.onmessage = (evt) => {
        //             console.log('收到消息', evt);
        //         };
        //     });
        // },
        // sendMessage(data){
        //     // this.ws.send(JSON.stringify({userId: data.userId, msg: '123'}));
        //     this.ws.send(JSON.stringify(data));
        // }
    },
};
</script>

<style lang="less">
.course_panel_psy {
    display: -webkit-box;
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-around;

    .title {
        font-size: 20px;
        font-weight: bold;
    }

    .item {
        cursor: pointer;
        width: 200px;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #e9e9e9;
        margin-right: 7px;
        margin-bottom: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;

        .avatar {
            width: 120px;
            height: 120px;
            margin: 15px auto;
        }
        .square-avatar {
            width: 200px;
            margin: 0;

            img {
                width: 100%;
            }
        }
        .course_body {
            padding: 13px 12px;
            color: #666;
            font-size: 16px;
            text-align: center;
            .title {
                font-size: 16px;
                color: #333;
                font-weight: 700;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .p_top {
                margin-top: 0.45vw;
            }
            .introduction {
                height: 60px;
            }
        }
        .text-l {
            text-align: left;
        }
    }
}

.onLine {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-bottom: 30px;

    .onLine-btn {
        line-height: 40px;
    }

    .onLine_body {
        width: 100px;
        padding-left: 10px;
        .title {
            font-size: 14px;
            color: #333;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .introduction {
            padding-top: 5px;
            font-size: 12px;
        }
    }
}
</style>